<template>
  <div class="wrap">
    <div class="page" v-if="!isShow">
      <!-- 头部 -->
      <div class="top">
        <div class="img"></div>
        <div @click="inputClickHandler" class="input">
          <p>
            <van-icon name="search" class="searchicon" />
            <span class="searchvalue">{{ value }}</span>
          </p>
          <van-icon name="clear" class="clear" @click="clearHandler" />
        </div>
        <div class="open">打开APP</div>
      </div>

      <!-- 导航 -->
      <div class="scrollview">
        <div class="navblock">
          <div class="navwrap">
            <div
              :class="['item', flag === index && 'active']"
              v-for="(item, index) in categoryList"
              :key="index"
              @click="navClickHandler(index)"
            >
              <text>{{ item }}</text>
              <p class="redline" v-show="flag === index"></p>
            </div>
          </div>
        </div>
      </div>
<!-- 全部 -->
      <div class="all" v-if="flag === 0">
        <!-- 相关主播 -->
        <div class="user" v-if="userList.length">
          <div class="usertop">
            <div class="titleq">'{{ keyword }}'&nbsp;&nbsp;相关的主播</div>
            <div class="more" @click="flag=3">更多 ></div>
          </div>
          <div class="userscrollview">
            <div class="usernavblock">
              <div class="usernavwrap">
                <div
                  class="useritem"
                  v-for="(item, index) in userList"
                  :key="index"
                  @click="routerHandler('user',item.userInfo.uid)"
                >
                  <img class="userimg" :src="item.userInfo.smallPic" alt="" />
                  <div class="userright">
                    <div class="username">{{ item.userInfo.nickname }}</div>
                    <div class="bottomicon">
                      <van-icon name="manager-o" class="manage" />
                      <div class="fan">
                        {{ simplifyNum(item.userInfo.followers_counts) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 相关专辑 -->
        <div class="album" v-if="albumList.length">
          <div class="albumtop">
            <div class="albumtitle">'{{ keyword }}'&nbsp;&nbsp;相关的专辑</div>
            <div class="albummore" @click="flag=1">更多 ></div>
          </div>
          <div class="albumcontent">
            <div
              class="albumitem"
              v-for="(item, index) in albumList.slice(0, 10)"
              :key="index"
              @click="routerHandler('album',item.albumInfo.id)"
            >
              <img class="albumimg" :src="item.albumInfo.cover_path" alt="" />
              <div class="content">
                <div class="title">{{ item.albumInfo.title }}</div>
                <div class="albumintro">{{ item.albumInfo.intro }}</div>
                <div class="contentbottom">
                  <div class="name">
                    <van-icon name="manager-o" class="manage" />
                    <span class="nickname">{{ item.albumInfo.nickname }}</span>
                  </div>
                  <div class="num">
                    <div class="iconfont icon-sound-wave"></div>
                    <span class="no">{{ item.albumInfo.tracks }}</span>
                  </div>
                  <div class="play">
                    <van-icon name="audio" class="audio" />
                    <span class="playnum">{{ simplifyNum(item.albumInfo.play) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 相关声音 -->
        <div class="sound" v-if="trackList.length">
          <div class="soundtop">
            <div class="soundtitle">'{{ keyword }}'&nbsp;&nbsp;相关的声音</div>
            <div class="soundmore" @click="flag=2">更多 ></div>
          </div>
          <div class="soundcontent">
            <div
              class="sounditem"
              v-for="(item, index) in trackList.slice(0, 10)"
              :key="index"
              @click="routerHandler('sound',item.trackInfo.id)"
            >
              <div class="iconfont icon-icon-video-play-fill"></div>
              <div class="content">
                <div class="title">{{ item.trackInfo.title }}</div>
                <div class="contentbottom">
                  <div class="name">
                    <van-icon name="manager-o" class="manage" />
                    <span class="nickname">{{ item.trackInfo.nickname }}</span>
                  </div>
                  <div class="num">
                    <div class="iconfont icon-sound-wave"></div>
                    <span class="no">02.51</span>
                  </div>
                  <div class="play">
                    <van-icon name="audio" class="audio" />
                    <span class="playnum"
                      >{{
                        simplifyNum(item.trackInfo.count_play)
                      }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
      <div
        class="empty"
        v-if="!albumList.length&&!userList.length&&!trackList.length"
      >
        <van-empty description="没有相关搜索结果" />
        <div class="recommend">
          <div class="rectitle">
            <div class="headtitle">经典必听推荐</div>
            <div class="more">更多 ></div>
          </div>
          <div class="reccontent" v-for="item in recommendItems" :key="item.id">
            <img
              class="recommendimg"
              src="https://imagev2.xmcdn.com/group61/M01/57/F1/wKgMcF1D2W-S6tE2AAADUIJ3rgc368.png"
              alt=""
            />
            <div class="right">
              <div class="recommendtitle">{{ item.albumInfo.title }}</div>
              <div class="desc">{{ item.albumInfo.recommendReason }}</div>
              <div class="bottomicon">
                <div class="play">
                  <div class="iconfont icon-sound-wave"></div>
                  <span class="no">{{ item.statCountInfo.trackCount }}</span>
                </div>
                <div class="sound">
                  <van-icon name="audio" class="audio" />
                  <span>{{ simplifyNum(item.statCountInfo.playCount) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>


      <!-- 主播页面 -->
      <div class="user" v-if="flag === 3">
          <User :keyword="keyword" />
          <!-- 空状态 -->
          <div
            class="empty"
            v-if="!userList.length"
          >
            <van-empty description="没有相关搜索结果" />
            <div class="recommend">
              <div class="rectitle">
                <div class="headtitle">经典必听推荐</div>
                <div class="more">更多 ></div>
              </div>
              <div class="reccontent" v-for="item in recommendItems" :key="item.id">
                <img
                  class="recommendimg"
                  src="https://imagev2.xmcdn.com/group61/M01/57/F1/wKgMcF1D2W-S6tE2AAADUIJ3rgc368.png"
                  alt=""
                />
                <div class="right">
                  <div class="recommendtitle">{{ item.albumInfo.title }}</div>
                  <div class="desc">{{ item.albumInfo.recommendReason }}</div>
                  <div class="bottomicon">
                    <div class="play">
                      <div class="iconfont icon-sound-wave"></div>
                      <span class="no">{{ item.statCountInfo.trackCount }}</span>
                    </div>
                    <div class="sound">
                      <van-icon name="audio" class="audio" />
                      <span>{{ simplifyNum(item.statCountInfo.playCount) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 专辑页面 -->
      <div class="album" v-if="flag === 1">
          <Album :keyword="keyword" />
          <!-- 空状态 -->
          <div
            class="empty"
            v-if="!albumList.length"
          >
            <van-empty description="没有相关搜索结果" />
            <div class="recommend">
              <div class="rectitle">
                <div class="headtitle">经典必听推荐</div>
                <div class="more">更多 ></div>
              </div>
              <div class="reccontent" v-for="item in recommendItems" :key="item.id">
                <img
                  class="recommendimg"
                  src="https://imagev2.xmcdn.com/group61/M01/57/F1/wKgMcF1D2W-S6tE2AAADUIJ3rgc368.png"
                  alt=""
                />
                <div class="right">
                  <div class="recommendtitle">{{ item.albumInfo.title }}</div>
                  <div class="desc">{{ item.albumInfo.recommendReason }}</div>
                  <div class="bottomicon">
                    <div class="play">
                      <div class="iconfont icon-sound-wave"></div>
                      <span class="no">{{ item.statCountInfo.trackCount }}</span>
                    </div>
                    <div class="sound">
                      <van-icon name="audio" class="audio" />
                      <span>{{ simplifyNum(item.statCountInfo.playCount) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
      <div class="sound" v-if="flag === 2">
          <Track :keyword="keyword" />
            <!-- 空状态 -->
            <div
              class="empty"
              v-if="!trackList.length"
            >
              <van-empty description="没有相关搜索结果" />
              <div class="recommend">
                <div class="rectitle">
                  <div class="headtitle">经典必听推荐</div>
                  <div class="more">更多 ></div>
                </div>
                <div class="reccontent" v-for="item in recommendItems" :key="item.id">
                  <img
                    class="recommendimg"
                    src="https://imagev2.xmcdn.com/group61/M01/57/F1/wKgMcF1D2W-S6tE2AAADUIJ3rgc368.png"
                    alt=""
                  />
                  <div class="right">
                    <div class="recommendtitle">{{ item.albumInfo.title }}</div>
                    <div class="desc">{{ item.albumInfo.recommendReason }}</div>
                    <div class="bottomicon">
                      <div class="play">
                        <div class="iconfont icon-sound-wave"></div>
                        <span class="no">{{ item.statCountInfo.trackCount }}</span>
                      </div>
                      <div class="sound">
                        <van-icon name="audio" class="audio" />
                        <span>{{ simplifyNum(item.statCountInfo.playCount) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
      </div>


      <Footer />
    </div>

    <SearchModel v-show="isShow" v-model="isShow" />
  </div>
</template>

<script setup lang="ts">
import {
  reqSearchList,
  reqRecommend,
  type recommendItemsModel,
  type albumInfoModel,
  type userInfoModel,
  type trackInfoModel,
} from "../../api/search";
import { onMounted, onUpdated, ref, watch } from "vue";

import { useRouter, useRoute } from "vue-router";

const router = useRouter()
const isShow = ref(false);
// input点击事件
const inputClickHandler = (e:any) => {
  
  if (e.target.nodeName === 'I') {
    value.value=""
  }else{
    isShow.value = true;
  }
};

const clearHandler = () => {
  value.value = "";
};

// 单位转换
function simplifyNum(number: number) {
  let str_num = 0;
  if (number >= 1e4 && number < 1e6) {
    str_num = number / 1e4;
    return str_num.toFixed(2) + "万";
  } else if (number >= 1e8 && number < 1e10) {
    str_num = number / 1e8;
    return str_num.toFixed(2) + "亿";
  } else {
    //一千以下
    return number;
  }
}

// 接收参数
const route = useRoute();
const keyword = ref(route.params.keyword);
watch(()=>keyword,() => {
  document.documentElement.scrollTop = 0
  value.value = keyword.value as string;
  getSearchList();
  getRecommend();
},{deep:true})

onMounted(() => {
  
  getSearchList();
  getRecommend();
  value.value = route.params.keyword as string
});
onUpdated(() => {
  keyword.value = route.params.keyword as string
  document.documentElement.scrollTop = 0
});

// 获取搜索列表数据
const userList = ref<userInfoModel[]>([]);
const albumList = ref<albumInfoModel[]>([]);
const trackList = ref<trackInfoModel[]>([]);
const getSearchList = async () => {
  let res = await reqSearchList(route.params.keyword as string);
  albumList.value = res.data.albumViews.albums;
  userList.value = res.data.userViews.users;
  trackList.value = res.data.trackViews.tracks;
};

// input
const value = ref<string>("");

// categoryList
const flag = ref<number>(0);
const categoryList = ["全部", "专辑", "声音", "主播"];
const navClickHandler = (index: number) => {
  flag.value = index;
};

// 空搜索的推荐列表
const recommendItems = ref<recommendItemsModel[]>();
const getRecommend = async () => {
  let res = await reqRecommend(route.params.keyword as string);
  recommendItems.value = res.data.recommendItems;
};


// 路由跳转事件
const routerHandler = (type:string,id:number) => {
  router.push(`/${type}/${id}`)
}
</script>

<style lang="scss" scoped>
.wrap {
  overflow-x: hidden;
  width: 375px;
  overflow-x: hidden;
  ::v-deep(.van-search__content) {
    height: 30px;
  }
  .top {
    width: 375px;
    box-sizing: border-box;
    padding: 30px 14px 17px;
    height: 20px;
    display: flex;
    align-items: center;
    .img {
      width: 75px;
      height: 15px;
      background: url(https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png)
        no-repeat;
      background-size: 100px 25px;
      background-position: -25px -5px;
    }
    .input {
      width: 170px;
      height: 30px;
      line-height: 30px;
      border-radius: 30px;
      background-color: #eff1f4;
      padding: 0 8px;
      margin-left: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        display: flex;
        align-items: center;
        .searchicon {
          font-size: 16px;
          margin-right: 6px;
        }
        .searchvalue {
          white-space: nowrap;
          overflow: hidden;
          text-overflow:clip;
          width: 120px;
        }
      }
      .clear {
        color: #a3a3ac;
        font-size: 16px;
      }
    }
    .open {
      text-align: center;
      border: 1px solid #f66847;
      color: #f86442;
      padding: 5px 8px;
      border-radius: 20px;
      margin-left: 10px;
      height: 16px;
    }
  }
  .scrollview {
    overflow: hidden;
    margin-bottom: 8px;
    .navblock {
      overflow-x: scroll;
      border-bottom: 1px solid #eee;
      &::-webkit-scrollbar {
        display: none;
      }

      .navwrap {
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #a3a3ac;
        .item {
          white-space: nowrap;
          padding: 8px 31px;
          position: relative;
          display: flex;
          align-items: center;
          flex-direction: column;
          &.active {
            font-size: 18px;
            color: #40404c;
            font-weight: 500;
          }
          .redline {
            width: 20px;
            height: 3px;
            border-radius: 2px;
            background-color: #f06742;
            position: absolute;
            bottom: 0;
            margin: 0 auto;
            border: none;
          }
        }
      }
    }
  }

  .user {
    width: 375px;
    box-sizing: border-box;

    .usertop {
      margin: 12px;
      display: flex;
      justify-content: space-between;
      padding: 12px 15px 4px;
      .titleq {
        font-size: 18px;
        color: #40404c;
      }
      .more {
        font-size: 12px;
        color: #aaa;
      }
    }
    .userscrollview {
      overflow: hidden;
      padding: 0 15px;
      .usernavblock {
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }

        .usernavwrap {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #a3a3ac;
          .useritem {
            white-space: nowrap;
            margin-right: 31px;
            display: flex;
            align-items: center;
            .userimg {
              width: 40px;
              height: 40px;
              margin-right: 5px;
              border-radius: 50%;
            }
            .userright {
              display: flex;
              flex-direction: column;
              .username {
                font-size: 14px;
                color: #40404c;
                padding: 0 0 4px;
              }
              .bottomicon {
                display: flex;
                align-items: center;
                .manage {
                  font-size: 12px;
                }
                .fan {
                  font-size: 12px;
                  color: #a3a3ac;
                  margin-left: 3px;
                }
              }
            }
          }
        }
      }
    }
  }
  .album {
    width: 375px;
    box-sizing: border-box;

    .albumtop {
      margin: 12px 12px 0 12px;
      display: flex;
      justify-content: space-between;
      padding: 12px 15px 0px;
      .albumtitle {
        font-size: 18px;
        color: #40404c;
        width: 270px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

      }
      .albummore {
        font-size: 12px;
        color: #aaa;
      }
    }
    .albumcontent {
      .albumitem {
        padding: 15px 10px 15px 20px;
        display: flex;
        border-bottom: 1px solid #e1e1e1;
        .albumimg {
          width: 70px;
          height: 70px;
          border-radius: 4px;
          margin-right: 15px;
        }
        .content {
          width: 260px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 0 10px;
          .title {
            font-size: 16px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .albumintro {
            font-size: 13px;
            color: #999;
            padding: 5px 0 7px;
          }
          .contentbottom {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 11px;
            height: 20px;
            line-height: 20px;
            .name {
              display: flex;
              align-items: center;
              .nickname {
                margin-left: 5px;
              }
              .manage {
                font-size: 13px;
              }
            }
            .num {
              display: flex;
              align-items: center;
              margin: 0 25px 0 10px;
              .no {
                margin-left: 5px;
              }
              .icon-sound-wave {
                color: #999;
                font-size: 17px;
              }
            }
            .play {
              display: flex;
              align-items: center;
              .playnum {
                margin-left: 5px;
              }
              .audio {
                font-size: 15px;
              }
            }
          }
        }
        .icon-icon-video-play-fill {
          color: #a3a3ac;
          font-size: 26px;
        }
      }
    }
  }
  .sound {
    width: 375px;
    box-sizing: border-box;

    .soundtop {
      margin: 12px 12px 0 12px;
      display: flex;
      justify-content: space-between;
      padding: 12px 15px 0px;
      .soundtitle {
        font-size: 18px;
        color: #40404c;
        width: 270px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .soundmore {
        font-size: 12px;
        color: #aaa;
      }
    }
    .soundcontent {
      .sounditem {
        padding: 15px 10px 15px 20px;
        display: flex;
        border-bottom: 1px solid #e1e1e1;
        .content {
          flex: 1;
          width: 260px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 0 10px;
          .title {
            font-size: 16px;
            margin-bottom: 5px;
            color: #40404c;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .contentbottom {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 11px;
            height: 20px;
            line-height: 20px;
            .name {
              display: flex;
              align-items: center;
              .nickname {
                margin-left: 5px;
              }
              .manage {
                font-size: 13px;
              }
            }
            .num {
              display: flex;
              align-items: center;
              margin: 0 10px;
              .no {
                margin-left: 5px;
              }
              .icon-sound-wave {
                color: #999;
                font-size: 17px;
              }
            }
            .play {
              display: flex;
              align-items: center;
              .playnum {
                margin-left: 5px;
              }
              .audio {
                font-size: 15px;
              }
            }
          }
        }
        .icon-icon-video-play-fill {
          color: #a3a3ac;
          font-size: 26px;
        }
      }
    }
  }

  .empty {
    .recommend {
      padding-left: 15px;
      .rectitle {
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        color: #40404c;
        .more {
          font-size: 12px;
          color: #72727b;
        }
      }
      .reccontent {
        margin-bottom: 20px;
        display: flex;
        padding: 15px 10px 15px 0;
        border-bottom: 1px solid #eee;
        .recommendimg {
          width: 70px;
          height: 70px;
          margin-right: 15px;
        }
        .right {
          .recommendtitle {
            font-size: 16px;
            color: #333;
          }
          .desc {
            font-size: 13px;
            color: #999;
            margin: 5px 0 7px;
          }
          .bottomicon {
            font-size: 11px;
            color: #999;
            display: flex;
            align-items: center;
            .play {
              display: flex;
              align-items: center;
              .no {
                margin-left: 4px;
              }
            }
            .sound {
              margin-left: 10px;
              span {
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
  }
}
</style>